<template>
  <div class="form-wrapper">
    <el-form ref="form" :model="form" label-position="top">
      <template v-if="type === 0">
        <PurchaseOrdersForm ref="orders"></PurchaseOrdersForm>
      </template>
      <template v-if="type === 1">
        <!-- 采购价列表 -->
        <PurchasePriceForm ref="price"></PurchasePriceForm>
      </template>
      <template v-if="type === 2">
        <!-- 入库单列表 -->
        <WarehuoseForm ref="warrant" @handleSearch="handleSearch"></WarehuoseForm>
      </template>
      <el-row :gutter="20" v-if="type != 2">
        <el-col>
          <div style="margin-top:12px;">
            <el-button size="mini" type="success" icon="el-icon-search"
            @click="handleSearch"
              >查询</el-button
            >
            <el-button size="mini" @click="reset" plain>重置</el-button>
            <el-button size="mini" plain v-show="type != 2" disabled>设置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import PurchaseOrdersForm from "./purchaseOrdersForm"
import PurchasePriceForm from "./purchasePriceForm"
import WarehuoseForm from "./warehuoseForm"
export default {
  components:{
    PurchaseOrdersForm,  // 采购单查询表单
    PurchasePriceForm, // 采购价查询表单
    WarehuoseForm, // 入库单查询表单
  },
  props: {
    type: {
      type: Number,
      default: 0 // 默认 1 采购单
    }
  },
  data() {
    return {
      form: {},
      formRefs:['orders', 'price', 'warrant']
    };
  },
  methods: {
    reset(){
      const refName = this.formRefs[this.type]
      this.$refs[refName].reset()
    },
    handleSearch(){
      const refName = this.formRefs[this.type]
      const data = this.$refs[refName].form
      this.$emit('handleSearch', data)
    }
  }
};
</script>

<style lang="scss" scoped>
.form-wrapper {
  background-color: #fff;
  padding-top: 6px;
  padding-bottom: 20px;
}
</style>

<style scoped>
/* element ui css */
.form-wrapper >>> .el-form {
  margin-left: 20px;
  width: 90%;
}
.form-wrapper >>> .el-date-editor .el-range__icon,
.form-wrapper >>> .el-date-editor .el-range-separator {
  line-height: 24px;
}
.form-wrapper >>> .el-input__inner {
  width: 100%;
}
.form-wrapper >>> .el-form-item {
  margin: 0;
}
.form-wrapper >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.form-wrapper >>> .el-range-input {
  font-size: 12px;
}
.form-wrapper >>> .el-form-item__label {
  line-height: 24px;
  font-size: 12px;
  font-weight: normal;
  padding: 0;
}
.form-wrapper >>> .el-dropdown {
  font-size: 12px;
}
.form-wrapper >>> .el-button--success:hover {
  background:#2BA10D!important;
  color:#fff!important;
}
</style>
